import React, { useEffect, useMemo } from 'react';

const UserMemoView = ({ count, age, children }) => {
  useEffect(() => {
    console.log("UserMemoView 执行")
  });
  // 计算属性的函数
  // 当父组件状态改变时，这个函数会执行。无论是不是改变的是count,还是user。。。
  const changeCount = () => {
    console.log("----count", count)
    return count;
  }

  // 怎么样，才可以在没有改变age时，不执行这个函数。
  const changeAge = () => {
    console.log("changeAge:", age)
    if (age < 18) {
      return '未成年人'
    } else {
      return '成年人'
    }
  }

  // useMemo()返回一个变量。
  const useMemoCheckAge = useMemo(() => {
    // 不应该执行复杂得业务逻辑
    console.log('user得age改变了，执行函数')

    return changeAge();
  }, [age]) // 依赖的变量，一定是 函数里面，要使用的变量。
  return (
    <div>
      {children}
      <div>
        count: {count}
      </div>
      <div>
        age: {age}
      </div>
      <hr />
      <button>count== {changeCount()}</button>
      {/* 只要父组件任何得state改变，子组件得changeAge()都要执行 */}
      {/* <button>age == {changeAge()}</button> */}

      {/* 但是使用 useMemo(),只要依赖得变量改变时，才执行这个函数。useMemoCheckAge函数，被useMemo()包裹后，useMemo会自动判断age是否
     改变，如果没有变化，就直接返回上次 changeAge()的结果。 当age改变时，就重新执行changeAge(),并缓存新的结果。
      */}

      <button>age = {useMemoCheckAge}</button>

    </div>
  );
}

export default UserMemoView;
